<template>
    <div class="changePhoneNext">
        <div class="text">更换手机号</div>
        <div class="newPhone">
            <label for="">新手机号 :</label>
            <input class="mobile" type="tel"  placeholder="请输入手机号" maxlength="11" v-model="form.tel">
        </div>
        <div class="getCode">
            <label for="">验证码 :</label>
            <input class="password" type="text"  placeholder="请输入验证码" v-model="form.code">
            <span @click="getCode" :disabled="disableds">{{hint}}</span>
        </div>
        <!-- <div class="warn" v-show="hints">验证码已发送到{{form.tel}},请注意查收</div> -->
        <el-row><el-button type="primary" round @click="submit">完成</el-button></el-row>
    </div>
</template>

<script>
// import jquery from "D:\项目\video_up\video_web\src\jquery-1.9.1.js";
export default {
  	data() {
		return {
			form: {
				tel: "",
				code: "", //输入的验证码
				code2: "" //后台返回的验证码
			},
			hint:"获取验证码",
			disableds:false,
			// hints:false
		};
	},
	methods: {
		getCode() {
			let flag=false;
			if (flag) return false;
			let i=60;
			let type = {
				type:1,
				tel: this.form.tel
			}
			let types = {
				type:0,
				tel:this.form.tel
			}
			if(this.form.tel.length==0 || this.form.tel == ''){
				this.$message.error("手机号不能为空");
				return;
			}
			if(!/^1[3|4|7|5|8]\d{9}$/.test(this.form.tel)){
				this.$message.error('请输入正确的手机号');
				return;
			}
			let countDown;
			this.utils.$get(
				this.utils.GET_USERTEL,
				data => {
					if(data.code != 0){
						this.utils.$post(
							this.utils.GET_USERSMS,
							data => {
                if(data.code == 0 ){
								this.form.code2 = data.data;//保存后台返回的验证码
								countDown = setInterval(()=>{
									this.disableds=true;
									i--;
									this.hint=i+"s";
									if(i <= 0){
										this.disableds=false;
										this.hint="获取验证码";
										clearInterval(countDown);
									}
								},1000)}
              },
							types
						);
					}else {
						this.$message.error('该号码已注册');
					}
				},
				type
			);
		},
		submit(){
			this.form.tel=$.trim(this.form.tel)
			if(this.form.tel.length ==0 || this.form.tel==''){
				this.$message.error("手机号不能为空");
				return;
			};
			if(this.form.code.length==0 || this.form.code==''){
				this.$message.error("验证码不能为空");
				return;
			}else if(this.form.code != this.form.code2){
				this.$message.error("验证码不正确");
				return;
			}else{
				// let url='';
        // let data=null;
        let codes=this.$route.params.oldCode
				this.utils.$post(this.utils.USER_REPLACE_TEL,
				res=>{
					if(res.code==0){
						this.$message("号码修改成功");
					}else{
						this.$message.error("号码修改失败");
					}
				},{code:codes ,codesms: this.form.code,tel: this.form.tel})
			}
		}
	}
}
</script>

<style lang="less">
.changePhoneNext {
  text-align: left;
  .text {
    margin-left: 35px;
    margin-top: 40px;
    display: inline-block;
    font-weight: 700;
    font-size: 18px;
    color: #399bff;
    padding-bottom: 10px;
    border-bottom: 3px solid #399bff;
  }
  .newPhone {
    margin-left: 35px;
    > label {
      font-size: 14px;
      color: #999999;
    }
    .mobile {
      font-size: 14px;
      color: #cccccc;
      text-indent: 8px;
      margin-top: 40px;
      border: 1px solid #cccccc;
      margin-left: 12px;
      height: 40px;
      width: 400px;
    }
  }
  .getCode {
    margin-top: 40px;
    margin-left: 49px;
    > label {
      font-size: 14px;
      color: #999999;
    }
    .password {
      font-size: 14px;
      color: #cccccc;
      text-indent: 8px;
      border: 1px solid #cccccc;
      margin-left: 12px;
      height: 40px;
      width: 280px;
    }
    > span {
      font-size: 14px;
      color: #399bff;
      margin-left: 12px;
    }
  }
   .warn {
    font-size: 14px;
    color: #999999;
    margin-top: 12px;
    margin-left: 122px;
  }
  .el-button--primary {
    width: 240px;
    height: 40px;
    border-radius: 40px;
    float: left;
    margin-top: 100px;
    margin-left: 132px;
    > span {
      font-size: 14px;

      color: #ffffff;
    }
  }
}
</style>

